<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
	.tzfd {
		/*vertical-align: middle;*/
		/*text-align: center;*/

		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);

	}
</style>
<body class="gray-bg">

<input type="hidden" id="byqId" th:value="*{byqId}"/>

     <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="formId">
					<div class="select-list">
						<ul>

							<li>
								照片来源：<!--<input type="text" name="resour"/>-->
								<select name="resour">
									<option value="">请选择</option>
									<option value="相机">相机</option>
									<option value="相册">相册</option>
								</select>
							</li>

							<!--<li>
								拍照时间：<input type="date" name="time"/>
							</li>-->

							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
								<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
			
	        <div class="btn-group-sm" id="toolbar" role="group">
				<!--<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="assets:iPicture:add">
					<i class="fa fa-plus"></i> 添加
				</a>
				<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()" shiro:hasPermission="assets:iPicture:edit">
					<i class="fa fa-edit"></i> 修改
				</a>
				<a class="btn btn-danger btn-del btn-del disabled" onclick="$.operate.removeAll()" shiro:hasPermission="assets:iPicture:remove">
					<i class="fa fa-remove"></i> 删除
				</a>-->
				<a class="btn btn-warning" onclick="exportPhoto()">
						<i class="fa fa-download"></i> 导出台区照片
				 </a>
			</div>
			<div class="col-sm-12 select-table table-striped">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
		</div>
	</div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('assets:iPicture:edit')}]];
        var removeFlag = [[${@permission.hasPermi('assets:iPicture:remove')}]];
        var prefix = ctx + "assets/iPicture";

        var byqId = $("#byqId").val();

        $(function() {
            var options = {
                url: prefix + "/listPhoto/"+byqId,
                createUrl: prefix + "/add",
                updateUrl: prefix + "/edit/{id}",
                removeUrl: prefix + "/remove",
				exportUrl: prefix + "/export",
                showExport:false,		// 是否支持导出文件
                showSearch:false,		//是否显示检索信息
                showRefresh:false,		//是否显示刷新按钮
                showToggle:false,		//是否显示详细视图和列表视图的切换按钮
                showColumns:false,		//是否显示隐藏某列下拉框
                sortable:false,		//是否启用排序
                modalName: "现场照片",
//		        showExport: true,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'id', 
					title : '主键',
					visible: false
				},
				{
					field : 'pId', 
					title : '所属点位',
					sortable: true,
                    formatter: function (value, row, index) {
                        return row.pName;
                    }
				},
				{
					field : 'name', 
					title : '照片名称',
					sortable: true,
                    visible: false
				},
				{
					field : 'type', 
					title : '照片类型',
					sortable: true
				},
				{
					field : 'sort', 
					title : '照片排序',
					sortable: true,
                    visible: false
				},
				{
					field : 'address', 
					title : '照片地址',
					sortable: true,
                    align: "center",
					formatter: function (value, row, index) {
					    var url = prefix+'/getPicture?address='+ value;
//                        return ' <img  src="' +prefix+'/getPicture?address='+ value + '"  id="img' + row.id + '"  style="width:40px;height:40px;" />';
						return '<a class = "view"  href="javascript:void(0)"><img style="width:40px;height:40px;"  src="'+url+'" /></a>'
                    },
                    events: 'operateEvents'
				},
				{
					field : 'resour', 
					title : '照片来源',
					sortable: true
				},
				{
					field : 'lgt', 
					title : '经度',
					sortable: true,
                    visible: false
				},
				{
					field : 'lat', 
					title : '纬度',
					sortable: true,
                    visible: false
				},
				{
					field : 'userId', 
					title : '拍摄人',
					sortable: true,
                    formatter: function (value, row, index) {
                        return row.userName;
                    }
				},
				{
					field : 'time', 
					title : '拍照时间',
					sortable: true,
                    formatter: function (value, row, index) {
                        return value!=null?new Date(value).Format('yyyy-MM-dd'):"";
                    }
				},
				{
					field : 'remarks', 
					title : '备注',
					sortable: true,
                    visible: false
				},
				{
					field : 'datastate', 
					title : '数据状态',
					sortable: true,
                    visible: false
				},
		        {
		            title: '操作',
		            align: 'center',
                    visible: false,
		            formatter: function(value, row, index) {
		            	var actions = [];
		            	actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
						return actions.join('');
		            }
		        }]
            };
            $.table.init(options);
        });



        /**
         * 	导出照片
         */
        function exportPhoto() {
            var url = ctx+ "assets/exportDetiail_Excel/photo?id="+byqId;
            window.location.href = url;
        }

		/**
		 * 	照片显示地址
		 */
//        function alarmFormatter(cellvalue, options, rowdata) {
//            return ' <img  src="' +prefix+'listPhoto?address='+ cellvalue + '"  id="img' + rowdata.guid + '"  style="width:40px;height:40px;" />';
//        }



        window.operateEvents = {

            'click .view': function (e, value, row, index) {
                console.log("value=="+value);
                console.log(row);
				/* var i = row.companyImage.indexOf("webapps");
				 var url = row.companyImage.substring(i+7,row.companyImage.length); */
//                var url = row.companyImage;
                var url = prefix+'/getPicture?address='+ value;
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['400px', '450px'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: '<img class="tzfd" src="'+url+'"/>'
                });
            },
        };



        /**
         * 	日期格式化
         */
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }




    </script>
</body>
</html>